<template>
	<view class="mine-page">
		<!-- 未绑定 -->
		<view class="bound-box" v-if="!bound">
			<view class="mine-bg"></view>

			<view class="use_box">
        <view class="login-box">
          <view v-if="isLogin&&userAc">
            <p>{{ userAc.userInfo.nickName||userAc.wxInfo.nickName }}</p>
            <p>欢迎来到西部食谷小程序</p>
          </view>
          <view v-else>
            <p>欢迎来到西部食谷</p>
            <p>更好的企业服务，登录即可体验</p>
          </view>

          <view v-if="!isLogin" class="min-login" @click="navTo('/pages/login2/login2')">
            登录
          </view>

          <view v-if="isLogin" class="min-login" @click="loginOut()">
            退出
          </view>

        </view>
        <!-- 绑定 -->
        <view class="daiban" v-if="isLogin">
          <view class="dpart" v-if="!isEmpty(userAc.userInfo)">
            {{ userAc.userInfo.dept.deptName||"" }}
          </view>
          <view class="schedule">
            <view class="backlog_tle">
              待办事项
            </view>
            <view class="backlog_con">
              <view class="backlog_con-c">
                <text>待审核</text>
                <text>0</text>
              </view>
              <view class="backlog_con-c">
                <text>待维修</text>
                <text>0</text>
              </view>
              <view class="backlog_con-c" @click="navTo('/pages/home/information')">
                <text>未读消息</text>
                <text>0</text>
              </view>
            </view>
          </view>
        </view>

				<view class="use_box-c" v-if="!userAc.wxBind&&isLogin">
					<view class="bind-box">
						<view class="bind-box-l">
							<image src="/static/img/mine/qiye.png" mode="widthFix"></image>
							<view class="">
								<p>绑定企业账号</p>
								<p>企业员工请绑定账号使用</p>
							</view>
						</view>
						<view class="bind-btn" @click="showBind=true">
							去绑定
						</view>
					</view>

				</view>

				<view class="use_box-c">
					<view class="use-item" @click="opItemClick('我的报修')">
						<view class="use-item-l">
							<image src="/static/img/mine/mine-icon1.png"></image>
							<text>我的报修</text>
						</view>
						<u-icon name="arrow-right" color="#999" size="22"></u-icon>
					</view>

					<view class="use-item" @click="opItemClick('我的车辆')">
						<view class="use-item-l">
							<image src="/static/img/mine/mine-icon5.png"></image>
							<text>我的车辆</text>
						</view>
						<u-icon name="arrow-right" color="#999" size="22"></u-icon>
					</view>

					<view class="use-item" @click="opItemClick('我的反馈')">
						<view class="use-item-l">
							<image src="/static/img/mine/mine-icon2.png"></image>
							<text>我的反馈</text>
						</view>
						<u-icon name="arrow-right" color="#999" size="22"></u-icon>
					</view>
				</view>

				<view class="use_box-c">
					<view class="use-item" @click="opItemClick('帮助中心')">
						<view class="use-item-l">
							<image src="/static/img/mine/mine-icon4.png"></image>
							<text>帮助中心</text>
						</view>
						<u-icon name="arrow-right" color="#999" size="22"></u-icon>
					</view>

					<view class="use-item" @click="opItemClick('关于我们')">
						<view class="use-item-l">
							<image src="/static/img/mine/mine-icon3.png"></image>
							<text>关于我们</text>
						</view>
						<view>
							<text style="font-size: 26rpx;color: #999999;">
								版本号（{{ version }}
							</text>
							<u-icon name="arrow-right" color="#999" size="22"></u-icon>
						</view>
					</view>

				</view>

			</view>


		</view>

		<u-popup v-model="showBind" mode="bottom" border-radius="20">
			<view class="bind-op">
				<view class="bind-op-t">绑定企业账号</view>
				<view class="inputbox">
					<u-input placeholder="请输入企业账号" v-model="bindForm.username" style="width: 100%" />
				</view>
				<view class="inputbox">
					<u-input placeholder="请输入密码" v-model="bindForm.password" type="password" width="100%"
						style="width: 100%" />
				</view>
				<view class="bindok-btn" @click="bindFn">
					确认绑定
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: 'tome',
		data() {
			return {
				showBind: false,
				bound: false,
				userAc: null,
				isLogin: false,
				version: '1.0.0',
				bindForm: {
					username: '',
					password: ''
				}
			};
		},
		created() {
			this.version = this.$version
			this.userAc = uni.getStorageSync("userAc")
			this.isLogin = uni.getStorageSync("isLogin")
		},
		methods: {
			opItemClick(name){
				if(this.isLogin){
					this.showToast(`${name}功能还在开发！`)
				}else{
					this.showToast('请先登录！')
				}
			},
			bindFn() {
				this.bindForm.phoneNumber = this.userAc.phone
				this.apis.wxAuth.bind(this.bindForm).then(res => {
					this.userAc.userInfo = res.data.resultMap.userInfo
					this.userAc.wxBind = true
					uni.setStorageSync("userAc", this.userAc)
					this.showToast('绑定成功')
					this.showBind = false
					uni.reLaunch({
						url: '/pages/home/index'
					})
				})
			},
			loginOut() {
				uni.showModal({
					title: '提示',
					content: '是否确认退出？',
					success: (res) => {
						if (res.confirm) {
							// if(this.userAc.wxBind){
							// 	this.$store.commit('tabbar/delWorkTab')
							// }
							this.isLogin = false
							this.userAc = null
							this.$store.commit("user/setIsLogin", false)
              this.$store.commit("tabbar/changeTabIndex", 1)
							uni.setStorageSync("isLogin", false)
							uni.removeStorageSync("userAc")
							uni.removeStorageSync("token")
							uni.removeStorageSync("menuRolesTree")

							uni.reLaunch({
								url:'/pages/home/index'
							})
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.bound_item {
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
	}

	.bound-box {
		.login-box {
      position: relative;
      margin-bottom: 40rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.min-login {
				padding: 16rpx 52rpx;
				background: #FFFFFF;
				border-radius: 6rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #17C25B;
			}

			p:nth-child(1) {
				font-size: 36rpx;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 42rpx;
			}

			p:nth-child(2) {
				margin-top: 12rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 28rpx;
				opacity: .5;
			}
		}

		.use_box {
			//position: absolute;
			//top: 340rpx;
			//left: 40rpx;
      position: relative;
      z-index: 2;
			width: 100%;

			.use_box-c {
				border-radius: 12rpx;
				padding: 0 40rpx;
				margin-bottom: 20rpx;
				background: #fff;
			}

			.bind-box {
				display: flex;
				justify-content: space-between;
				padding: 40rpx 0;
				padding-right: 40rpx;

				.bind-box-l {
					display: flex;
					align-items: center;
				}

				.bind-btn {
					padding: 16rpx 38rpx;
					border: 2rpx solid rgba(#32C156, 0.9);
					border-radius: 6rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #17C25B;
				}

				image {
					margin-right: 30rpx;
					width: 70rpx;
				}

				p:nth-child(1) {
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
					line-height: 35rpx;
				}

				p:nth-child(2) {
					margin-top: 4rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #999999;
					line-height: 28rpx;
				}

			}

			.use-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				padding: 40rpx 0;

				&:after {
					content: "";
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 2rpx;
					background: #f6f6f6;
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}

				.use-item-l {
					display: flex;
					align-items: center;

					text {
						margin-left: 30rpx;
					}
				}
			}

			.use-item:last-child {
				&:after {
					display: none;
				}
			}
		}

	}

	.mine-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 440rpx;
		background: #17C25B;
	}

	.bind-op {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx;
		background: #f8f8f8;

		.bind-op-t {
			margin-top: 30rpx;
			width: 100%;
			text-align: center;
			padding-bottom: 30rpx;
			font-weight: 500;
			color: #333;
			font-size: 34rpx;
		}

		.inputbox {
			width: 100%;
			display: flex;
			align-items: center;
			height: 80rpx;
			padding: 0 30rpx;
			border-radius: 6rpx;
			margin-bottom: 20rpx;
			background: #fff;
		}
	}

	.bindok-btn {
		display: inline-block;
		margin: 40rpx 0;
		padding: 14rpx 28rpx;
		background: #17C25B;
		border-radius: 6rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #fff;
	}

  .daiban{
    margin-bottom: 20rpx;
    width: 710rpx;
    height: 294rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    padding: 62rpx 30rpx 0;
    position: relative;
    .dpart{
      padding: 10rpx 24rpx 10rpx 12rpx;
      height: 52rpx;
      background: #D8F5E0;
      position: absolute;
      top: 0;
      left: 0;
      transform: translateY(-40%);
      font-size: 26rpx;
      font-weight: 500;
      color: #17C25B;
      border-radius: 12rpx 4rpx 30rpx 0rpx;
    }

    .schedule {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: stretch;

      .backlog_tle {
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 20rpx;
      }

      .backlog_con {
        display: flex;
        justify-content: space-between;

        view {
          padding: 20rpx 26rpx;
          width: 204rpx;
          height: 140rpx;
          display: flex;
          justify-content: center;
          flex-direction: column;
          background: #F6F9F7;
          border-radius: 6rpx;

          text:nth-child(1) {
            font-size: 26rpx;
            font-weight: 400;
            margin-bottom: 4rpx;
          }

          text:nth-child(2) {
            font-size: 46rpx;
            font-weight: 500;
            color: #F16757;
          }
        }
      }
    }
  }
</style>
